class Drap {
  static zIndex = 1;
  constructor(el, option = {}) {
      this.el = el;
      this.x = 0;
      this.y = 0;
      this.option = option;
      this.init();
      this.timeOutEvent = 0;
      this.ele = null
  }
  init() {
      this.setEleStyle(this.option || {});
      //拖拽事件赋值给头部标签，此处代码可实现仅在移动头部时Operation整个DOM块
      // this.ele = this.el.getElementsByClassName('header')[0]
      // if(this.ele){
      //  this.ele.onmousedown = (e) => {
      //      this.onMouseDown(e)
      //      this.el.setCapture && this.el.setCapture() //全局捕获
      //  }
      // }else{
      //  this.el.onmousedown = (e) => {
      //      this.onMouseDown(e)
      //      this.el.setCapture && this.el.setCapture() //全局捕获
      //  }
      // }
      this.el.onmousedown = (e) => {
          this.gtouchstart(e)
      }
  }
   
  //样式设置
  setEleStyle(option) {
      for (const key in option) {
          this.el.style[key] = option[key]
      }
  }
  //按下ele
  onMouseDown(e) {
      let zIndex = getComputedStyle(this.el).getPropertyValue('z-index');
      zIndex = isNaN(zIndex) ? 1 : zIndex
      Drap.zIndex = Drap.zIndex > zIndex ? Number(Drap.zIndex) + 1 : Number(zIndex) + 1
      this.setEleStyle({
          "zIndex": Drap.zIndex,
          position: 'fixed',
          'cursor': 'move'
      })
      this.x = e.clientX - this.el.offsetLeft;
      this.y = e.clientY - this.el.offsetTop;
      document.onmousemove = (e) => this.onMouseMove(e);
      document.onmouseup = (e) => this.onMouseUp(e)
  }
  //移动move
  onMouseMove(e) {
      this.gtouchmove()
      let X = e.clientX - this.x
      let Y = e.clientY - this.y
  //下面代码OperationDOM元素不会移出屏幕，-25应更换为-10，按自己需求设置
      if (X < 0) {
          X = 0
      } else if (X > document.documentElement.clientWidth - this.el.offsetWidth) {
          X = document.documentElement.clientWidth - this.el.offsetWidth - 25
      }
      if (Y < 0) {
          Y = 0
      } else if (Y > document.documentElement.clientHeight - this.el.offsetHeight) {
          Y = document.documentElement.clientHeight - this.el.offsetHeight - 25
      }
      this.el.style.left = X + 'px'
      this.el.style.top = Y + 'px'
  }
  //释放
  onMouseUp(e) {
      this.gtouchend()
      document.onmousemove = null
      document.onmouseup = null
      this.setEleStyle({
          'cursor': 'pointer'
      })
      this.el.setCapture && this.el.setCapture() //释放全局捕获
  }
  gtouchstart(e) {
      this.timeOutEvent = setTimeout(() => {
          this.timeOutEvent = 0;
          //真正长按后应该执行的内容
          console.log("长按事件触发发");
          this.onMouseDown(e)
          this.el.setCapture && this.el.setCapture() //全局捕获
      }, 200); 
      return false;
  }
  gtouchmove() {
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
      console.log("取消了");
  }
  gtouchend() {
      clearTimeout(this.timeOutEvent); //清除定时器
      if (this.timeOutEvent !== 0) {
          console.log("你这是点击，不是长按");
      }
      return false;
  }
}
const drag = {
  mounted(el, binding) {
      new Drap(el, binding.value || {})
  }
}
export default drag